<template>
  <div>
    <button @click="setCount(1)">count增加1</button>
    <button @click="setCount(2)">count增加2</button>
    <button @click="setCount(3)">count增加3</button>
    <br>
    <button @click="asyncSetCount(666)">延迟增加 666</button>
    <button @click="asyncSetCount(333)">延迟增加 333</button>
    <button @click="asyncSetCount(999)">延迟增加 999</button>
    <br>
    {{name}}
    {{myName}}
    {{count}}
    <br>
    {{$store.state.list}}
    <br>
    {{filterList}}
    <br>
    学校地址: {{schoolAddr}}
  </div>
</template>

<script>
import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'
console.log(mapState(['name', 'count']));

export default {
  data() {
    return {
      name: '大锤'
    }
  },
  computed: {
    // name() {
    //   return this.$store.state.name
    // },
    // count() {
    //   return this.$store.state.count
    // }
    // 可以使用辅助函数创建一堆state的计算属性函数,
    // 会返回一个对象, 里面包含所有需要的函数
    // 在这用...展开拼接到computed 两掺面即可
    ...mapState(['count']),
    ...mapState({
      myName: 'name'
    }),
    // filterList() {
    //   return this.$store.getters.filterList
    // }
    ...mapGetters(['filterList', 'schoolAddr'])
  },
  mounted() {
    // $store 是vuex 会在 this vue 实例中注入的一个 vuex 实例
    console.log(this.$store);
    console.log(this.$store.state.name);
    console.log(this.$store.state.count);
  },
  methods: {
    // asyncSetCount(data) {
    //   this.$store.dispatch('asyncSetCount', data)
    // },
    ...mapActions(['asyncSetCount']),
    // setCount(data) {
    //   // this.$store.state.count ++
    //   // 如果要给 mutations 传参
    //   // 只需带在第二个参数即可
    //   this.$store.commit('setCount', data)
    // }
    ...mapMutations(['setCount'])
  }
}
</script>

<style>

</style>